import { getRoomDetailApi, getRoomDetailListApi } from '@/api/shopman'
import { useRequest } from 'ahooks'
import { Button, message, Table, Tag } from 'antd'
import { FC, useCallback, useEffect, useMemo, useState } from 'react'

interface AppRoomTableProps {
  
}

const AppRoomTable: FC<AppRoomTableProps> = (props) => {
  const {datalist} = props
  const [count, setCount] = useState(1)
  const [limitNum, setLimitNum] = useState(5)
  const [ total, setTotal ] = useState(0)
  const { data: list = [], loading, run: getList=(count:number, pagesize:number)=> []} = useRequest<any, []>(() => getRoomDetailApi(count, limitNum),{
    manual:true
  })
  const getData = useCallback(async() => {
    try {
      const res = await getRoomDetailListApi()
      setTotal(res.length)
    } catch (error) {
      console.log(error)
    }
  },[])
  const handlePageChange = useCallback((page: number, pageSize: number) => {
    setCount(page)
    setLimitNum(pageSize)
  }, [])

  const pagination = useMemo(() => ({
    current: count,
    pageSize: limitNum,
    total:total,
    onChange: handlePageChange,
  }), [count, limitNum, list, handlePageChange, total])

  useEffect(() => {
    getData()
    getList(count, limitNum)
  }, [count, limitNum])
  useEffect(() => {
    if(list){
      message.success('获取门店列表成功！')
    }
  }, [])
  const columns = useMemo(() => ([
    {
      title: '商户编号',
      dataIndex: 'shopId',
      ellipsis: true,
      width: 150,
    },
    {
      title: '门店名称',
      dataIndex: 'shopName',
      width: 150,
    },
    {
      title: '区域',
      dataIndex: 'shopProvince',
    },
    {
      title: '地址',
      dataIndex: 'adress',
    },
    {
      title: '电话',
      dataIndex: 'tel',
      width: 130,
      align: 'center',
    }
  ]), [])
  return ( 
    <div>
      {
        datalist?<Table loading={ loading } pagination={pagination} dataSource={ datalist|| [] } rowKey="shopId" columns={ columns }  />
        :
        <Table loading={ loading } pagination={pagination} dataSource={ list|| [] } rowKey="shopId" columns={ columns }  />
      }
      {/* <Table loading={ loading } pagination={pagination} dataSource={ list|| [] } rowKey="shopId" columns={ columns }  /> */}
    </div>
   )
}

export default AppRoomTable